replace()简单介绍
replace()基本语法是String.replace(searchValue,replaceValue),其中searchValue为字符串或者正则,replaceValue为字符串或者函数。对于第一个参数为字符串是很简单的。
var str = 'hello world';str.replace('h','H');//Hello world
这算是最基本的的替换了。如果仅仅只用到这种替换的话,我只能说真是太无趣了。我们把正则拉出来,处理复杂的替换,用函数来实现逻辑上的难点。
深入了解replace()
1.第二个参数为字符串
如果第二个参数是字符串,还可以使用一些特殊的字符序列,将正则表达式操作得到的值插入到结果字符串中,下表列出了ECMAScript提供的这些特殊的字符序列。
字符 | 替换文本 |
$& | 与正则相匹配的字符串 |
$` | 匹配字符串左边的字符 |
$’ | 匹配字符串右边的字符 |
$n(n=1~99) | 匹配结果中对应的分组匹配结果 |
我们用这些特殊字符序列实现一些复杂的功能。先来看看调换位置。
var str = "hello world"; var rep = /(\w+)\s(\w+)/; str.replace(rep, "$2, $1");
通过这些字符序列还可以对str做一些特殊的处理,比如说将‘hello’加上[]
var str = "hello world"; var rep = /(\w+)/; console.log(str.replace(rep, "[$1]"));
看一个stackoverflow上的问题
var iable = 'some textsome text2some text3some text4some text5some text6';var iable1 ='some textsome text2some text3some text4some text5some text6';
问题是如何从iable转化为iable1,也就是怎么做才能把some text2、some text4和some text6后的</td>替换为</td></tr><tr>
var variable = 'some textsome text2some text3some text4some text5some text6';var reg = /(.*?<\/td>.*?)<\/td>/g;alert(variable.replace(reg, '$1'));
这个是其中一个用户给出的答案,用的是replace函数,当然还有其他的更简单的一些方法,有兴趣的可以去看看。
对于replace(),能把正则理解透彻,这些替换也就不难了。
2.第二个参数是函数
函数为replace()增加了很多的灵活性,在实际应用中个人感觉会用到很多(还莫有写太多h5),因为我们会用到太多的交互,用函数传参就很好实现了。
(function (window) { function fn(str) { this.str = str; } fn.prototype.format = function () { var arg =Array.prototype.slice.call(arguments,0);return this.str.replace(/\{(\d+)\}/g, function (a, b) { return arg[b] || ''; }); } window.fn = fn; })(window); // use (function(){ var t = new fn('{1}{2}
'); console.log( t.format('http://www.alibaba.com', 'Alibaba', 'Welcome') ); })();
这个是阿里巴巴一个面试题,具体考的是什么,还有函数是怎么实现的我就不多说了,我们主要来看下a和b的值对应的是什么。从arg[b]可以看出b应该是数字,应为arg是数组,而且根据format()所传的参数能推断出b为0,1,2。那么a是什么呢?我们可以把arg[b]换成a,然后运行,看下结果是什么。打印结果是“<p><a href="{0}">{1}</a><span>{2}</span></p>”,看到结果的我也是惊了个呆,赶紧查看是不是哪出错了,仔细看了下才发现a原来是匹配的字符,恍然大悟。
其实传入的函数还有另两个参数,我们把它们写进去,分别为c和d,然后按照同样的方法进行打印,也就得到c和d所代表的内容。那么这4个参数:第一个参数表示匹配到的字符,第二个参数表示匹配到的字符最小索引位置(RegExp.index),第三个参数表示被匹配的字符在整个字符串的位置,第四个参数表示被匹配的整个字符串。
了解了这几个参数是什么,相信对于函数传参的使用也就信手拈来了。